
<!DOCTYPE html>
<html>
<head>
<title>Modern CV a Personal Websites Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Modern CV Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style1.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/swipebox.css">
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
</head>
	
<body>
	<div class="banner_body">
		<div class="container">
			<div class="w3ls_logo_nav">
				<div class="w3ls_logo_nav_right">
					<div class="sap_tabs">
						<div class="w3ls_logo_nav_left">
							<h1><a href="index.html">Modern CV</a></h1>
						</div>
						<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
							<div class="resp-tabs-container">
								
								<ul class="resp-tabs-list">
									<li class="resp-tab-item" aria-controls="tab_item-1" id="tab_item-1">Home</li>
									<li class="resp-tab-item" aria-controls="tab_item-2" id="tab_item-2">About Me</li>
									<li class="resp-tab-item" aria-controls="tab_item-3" id="tab_item-3">My Work</li>
									<li class="resp-tab-item" aria-controls="tab_item-4" id="tab_item-4">Blog</li>
									<li class="resp-tab-item" aria-controls="tab_item-5" id="tab_item-5">Contact</li>
								</ul>
								<div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
				<!-- home -->					
									<div class="wthree_tab_content">
										<img src="images/banner.jpg" alt=" " class="img-responsive"/>
										<div class="wthree_tab_content_pos1">
											<ul>
												<li><a href="#" class="facebook"></a></li>
												<li><a href="#" class="twitter"></a></li>
												<li><a href="#" class="g"></a></li>
											</ul>
										</div>
										<div class="wthree_tab_content_pos">
											<div class="wthree_tab_content_pos_grid">
												<h2>Hello</h2>
												<h3>I'm Nicola Rider</h3>
												<h6>UI / UX Developer / Wordpress</h6>
												<ul class="address">
													<li>
														<ul class="address-text">
															<li><b>PHONE </b></li>
															<li>+00 111 222 3333</li>
														</ul>
													</li>
													<li>
														<ul class="address-text">
															<li><b>ADDRESS </b></li>
															<li>756 North Sydney, Canada.</li>
														</ul>
													</li>
													<li>
														<ul class="address-text">
															<li><b>E-MAIL </b></li>
															<li><a href="mailto:example@mail.com"> mail@example.com</a></li>
														</ul>
													</li>
													<li>
														<ul class="address-text">
															<li><b>WEBSITE </b></li>
															<li><a href="http://w3layouts.com">www.w3layouts.com</a></li>
														</ul>
													</li>
												</ul>
											</div>
										</div>
									</div>
				<!-- //home -->
								</div>
								<div class="tab-2 resp-tab-content" aria-labelledby="tab_item-2">
				<!-- about -->
									<div class="agile_about">
										<div class="agile_about_pos">
											<img src="images/1.png" alt=" " class="img-responsive" />
										</div>
									</div>
									<div class="agileits_agile_about">
										<h3>About Me</h3>
										<div class="col-md-6 agileits_agile_about_left">
								<!-- 			<p>Sed ac libero mattis, accumsan lacus nec, eleifend 
												tortor. Etiam sodales consequat cursus. Quisque 
												venenatis mi at nulla pulvinar lobortis. Mauris 
												vulputate odio sed dolor suscipit, a sollicitudin 
												sapien auctor. Nam aliquam tellus nibh, molestie 
												dictum ipsum lobortis in.</p> -->
										</div>
										<div class="col-md-6 agileits_agile_about_right">
											<h4>Nam vestibulum odio eu erat pulvinar pulvinar. 
												Aliquam enim odio, scelerisque quis lacus.</h4>
										</div>
										<div class="clearfix"> </div>
										<div class="agileits_skills_grids">
											<div class="col-md-6 <!-- agileits_skills_grid">
												<div class="skills">
													<div class="skill1" style="width:80%"> </div>		
													<div class="bar">
														<p>姓名：小白</p>
													</div>
												</div>
												<div class="skills skills1">
													<div class="skill3" style="width:75%"> </div>							
													<div class="bar">
														<p>地区：南山区</p>
													</div>
												</div>
												<div class="skills skills2">
													<div class="skill4" style="width:60%"> </div>							
													<div class="bar">
														<p>年龄：18</p>
													</div>
												</div>
												<div class="skills skills3">
													<div class="skill5" style="width:36%"> </div>							
													<div class="bar">
														<p>电话号码：******</p>
													</div>
												</div> -->
											</div>
											<div class="col-md-6 agileits_skills_grid">
												<div class="skills">
													<div class="skill1" style="width:80%"> </div>		
													<div class="bar">
														<p>第一步：饮食均衡</p>
													</div>
												</div>
												<div class="skills skills1">
													<div class="skill3" style="width:75%"> </div>							
													<div class="bar">
														<p>第二步：短跑训练</p>
													</div>
												</div>
												<div class="skills skills2">
													<div class="skill4" style="width:60%"> </div>							
													<div class="bar">
														<p>第三步：腰部力量</p>
													</div>
												</div>
												<div class="skills skills3">
													<div class="skill5" style="width:36%"> </div>							
													<div class="bar">
														<p>第四步：腹部力量</p>
													</div>
												</div>
											</div>
											<div class="clearfix"> </div>
										</div>
									</div>
				<!-- //about -->
								</div>
								<div class="tab-3 resp-tab-content" aria-labelledby="tab_item-3">
				<!-- work -->
									<div class="agile_about">
										<div class="agile_about_pos">
											<img src="images/1.png" alt=" " class="img-responsive" />
										</div>
									</div>
									<div class="agileits_agile_about">
										<h3>My Work</h3>
										<div class="agileits_agile_about_portfolio">
											<div class="col-md-4 agileits_agile_about_portfolio_left">
												<div class="w3_portfolio_grid view second-effect">
													<a href="images/2.jpg" class="swipebox" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis maximus tortor diam, ac lobortis justo rutrum quis. Praesent non purus fermentum, eleifend velit non.">
														<img src="images/2.jpg" alt=" " class="img-responsive" />
														<div class="mask">
															<p>Modern CV</p>
														</div>
													</a>
												</div>
											</div>
											<div class="col-md-4 agileits_agile_about_portfolio_left">
												<div class="w3_portfolio_grid view second-effect">
													<a href="images/3.jpg" class="swipebox" title="Fusce malesuada sapien enim, eget molestie quam laoreet ut. Mauris aliquet nisl in enim malesuada suscipit.Praesent non purus fermentum, eleifend velit non.">
														<img src="images/3.jpg" alt=" " class="img-responsive" />
														<div class="mask">
															<p>Modern CV</p>
														</div>
													</a>
												</div>
											</div>
											<div class="col-md-4 agileits_agile_about_portfolio_left">
												<div class="w3_portfolio_grid view second-effect">
													<a href="images/4.jpg" class="swipebox" title=" Proin finibus molestie eros, non pretium magna venenatis non. Vivamus imperdiet eget ipsum quis malesuada. Integer viverra laoreet nisi.">
														<img src="images/4.jpg" alt=" " class="img-responsive" />
														<div class="mask">
															<p>Modern CV</p>
														</div>
													</a>
												</div>
											</div>
											<div class="clearfix"> </div>
										</div>
										<div class="agileits_agile_about_portfolio1">
											<div class="col-md-4 agileits_agile_about_portfolio_left">
												<div class="w3_portfolio_grid view second-effect">
													<a href="images/5.jpg" class="swipebox" title="Sed sagittis neque nec consectetur rhoncus. Sed luctus ut arcu quis tempus. Nullam fringilla eros ac porta sollicitudin. Ut a enim tempor.">
														<img src="images/5.jpg" alt=" " class="img-responsive" />
														<div class="mask">
															<p>Modern CV</p>
														</div>
													</a>
												</div>
											</div>
											<div class="col-md-4 agileits_agile_about_portfolio_left">
												<div class="w3_portfolio_grid view second-effect">
													<a href="images/6.jpg" class="swipebox" title="Suspendisse nisl turpis, gravida a nisl et, egestas lacinia ipsum. Suspendisse rhoncus erat non sem blandit, at condimentum enim bibendum porttitor mauris.">
														<img src="images/6.jpg" alt=" " class="img-responsive" />
														<div class="mask">
															<p>Modern CV</p>
														</div>
													</a>
												</div>
											</div>
											<div class="col-md-4 agileits_agile_about_portfolio_left">
												<div class="w3_portfolio_grid view second-effect">
													<a href="images/7.jpg" class="swipebox" title="Ut sit amet convallis ipsum. Nunc tempor quam ex, eget porta sem vehicula sit amet. In eget elit eu eros pharetra ultrices. Integer fringilla tortor id metus condimentum.">
														<img src="images/7.jpg" alt=" " class="img-responsive" />
														<div class="mask">
															<p>Modern CV</p>
														</div>
													</a>
												</div>
											</div>
											<div class="clearfix"> </div>
										</div>
										<!-- swipe box js -->
										<script src="js/jquery.swipebox.min.js"></script> 
											<script type="text/javascript">
												jQuery(function($) {
													$(".swipebox").swipebox();
												});
										</script>
										<!-- //swipe box js -->
									</div>
				<!-- //work -->
								</div>
								<div class="tab-4 resp-tab-content" aria-labelledby="tab_item-4">
				<!-- blog -->
									<div class="agile_about">
										<div class="agile_about_pos">
											<img src="images/1.png" alt=" " class="img-responsive" />
										</div>
									</div>
									<div class="agileits_agile_about">
										<h3>Blog</h3>
										<div class="agileits_agile_about_blog">
											<div class="col-md-6 agileits_agile_about_blog_left">
												<div class="agile_about_blog_left_grid">
													<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/8.jpg" alt=" " class="img-responsive" /></a>
													<div class="agile_about_blog_left_grid_pos">
														<ul>
															<li>20</li>
															<li>July, 2016</li>
														</ul>
													</div>
												</div>
											</div>
											<div class="col-md-6 agileits_agile_about_blog_right">
												<div class="agile_about_blog_right_grid">
													<div class="agile_model">
														<a href="#" data-toggle="modal" data-target="#myModal">consequat sapien commodo</a>
													</div>
													<div class="agile_about_blog_right_grid_list">
														<ul>
															<li><span class="glyphicon glyphicon-user" aria-hidden="true"></span><a href="#">Admin</a></li>
															<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="#">2 Comments</a></li>
														</ul>
													</div>
													<p>Pellentesque eleifend ultricies tellus,varius risus, id dignissim sapien velit id felis ac cursus eros mattis et.</p>
												</div>
											</div>
											<div class="clearfix"> </div>
										</div>
										<div class="agileits_agile_about_blog">
											<div class="col-md-6 agileits_agile_about_blog_left">
												<div class="agile_about_blog_left_grid">
													<a href="#" data-toggle="modal" data-target="#myModal"><img src="images/9.jpg" alt=" " class="img-responsive" /></a>
													<div class="agile_about_blog_left_grid_pos">
														<ul>
															<li>25</li>
															<li>July, 2016</li>
														</ul>
													</div>
												</div>
											</div>
											<div class="col-md-6 agileits_agile_about_blog_right">
												<div class="agile_about_blog_right_grid">
													<div class="agile_model">
														<a href="#" data-toggle="modal" data-target="#myModal">porta lobortis quam egestas</a>
													</div>
													<div class="agile_about_blog_right_grid_list">
														<ul>
															<li><span class="glyphicon glyphicon-user" aria-hidden="true"></span><a href="#">Admin</a></li>
															<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span><a href="#">5 Comments</a></li>
														</ul>
													</div>
													<p>Pellentesque eleifend ultricies tellus,varius risus, id dignissim sapien velit id felis ac cursus eros mattis et.</p>
												</div>
											</div>
											<div class="clearfix"> </div>
										</div>
										<div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
											<div class="modal-dialog" role="document">
												<div class="modal-content">
													<div class="modal-header">
														Modern CV
														<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>						
													</div>
													<section>
														<div class="modal-body">
															<img src="images/8.jpg" alt=" " class="img-responsive" />
															<p>Ut enim ad minima veniam, quis nostrum 
																exercitationem ullam corporis suscipit laboriosam, 
																nisi ut aliquid ex ea commodi consequatur? Quis autem 
																vel eum iure reprehenderit qui in ea voluptate velit 
																esse quam nihil molestiae consequatur, vel illum qui 
																dolorem eum fugiat quo voluptas nulla pariatur.
																<i>" Quis autem vel eum iure reprehenderit qui in ea voluptate velit 
																	esse quam nihil molestiae consequatur.</i></p>
														</div>
													</section>
												</div>
											</div>
										</div>
									</div>
				<!-- //blog -->
								</div>
								<div class="tab-5 resp-tab-content" aria-labelledby="tab_item-5">
				<!-- contact -->
									<div class="agile_about">
										<div class="agile_about_pos">
											<img src="images/1.png" alt=" " class="img-responsive" />
										</div>
									</div>
									<div class="agileits_agile_about">
										<h3>Contact Me</h3>
										<div class="agileits_agile_about_mail">
											<form action="#" method="post">
												<div class="col-md-6 agileits_agile_about_mail_left">
													<input type="text" name="Name" placeholder="Name" required="">
													<input type="text" name="Subject" placeholder="Subject" required="">
												</div>
												<div class="col-md-6 agileits_agile_about_mail_left">
													<input type="email" name="Email" placeholder="Email" required="">
													<input type="text" name="Phone" placeholder="Phone" required="">
												</div>
												<div class="clearfix"> </div>
												<textarea name="Message" placeholder="Message..." required=""></textarea>
												<input type="submit" value="Submit">
											</form>
										</div>
									</div>
									<div class="w3agile_map">
										<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2564.958900464012!2d36.23097800000001!3d49.993379999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4127a0f009ab9f07%3A0xa21e10f67fa29ce!2sGeorgia+Education+Center!5e0!3m2!1sen!2sin!4v1436943860334" style="border:0"></iframe>
										<div class="agileinfo_map_color">
											<div class="agileinfo_map_color_grid">
												<div class="col-md-4 agileinfo_map_color_grid_left">
													<h4><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>Address</h4>
													<p>123 San Sebastian, Hill Towers 4567 New York City, USA.</p>
												</div>
												<div class="col-md-4 agileinfo_map_color_grid_left">
													<h4><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>Mail Me</h4>
													<p><a href="mailto:example@mail.com"> mail@example.com</a></p>
													<p><a href="mailto:example@mail.com"> mail@example1.com</a></p>
												</div>
												<div class="col-md-4 agileinfo_map_color_grid_left">
													<h4><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>Phone</h4>
													<p>+(018) 111 333 4444</p>
													<p>+(018) 111 333 4445</p>
												</div>
												<div class="clearfix"> </div>
											</div>
										</div>
									</div>
								</div>
			<!-- //contact -->
							</div>
						</div>
						
					</div>
					<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
						<script type="text/javascript">
							$(document).ready(function () {
								$('#horizontalTab').easyResponsiveTabs({
									type: 'default', //Types: default, vertical, accordion           
									width: 'auto', //auto or any width like 600px
									fit: true   // 100% fit in a container
								});
							});			
						</script>
				</div>
				<div class="clearfix"> </div>
			</div>
			<div class="agileits_copyright">
				<p>© 2017 Modern CV. All rights reserved | Design by <a href="http://w3layouts.com">W3layouts</a></p>
			</div>
		</div>
	</div>
<!-- for bootstrap working -->
<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
</body>
</html>